<?php 
    Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/scripts/jquery.picasa.js');
    Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/scripts/jquery.tmpl.min.js');
?>
<style>
    .item{
        color:black;
        display: inline;
        margin: 10px;
        text-align: center;
        padding:6px;
    }
    
    .item img{
        width:200px;
        padding:5px;
        border:1px dashed #999;
    }
    
    #gallery ul{
        text-align: center;
        margin-left: 10px;
    }
    
    
</style>
<script id="albumTemplate" type="text/x-jquery-tmpl"> 
            <li>
            <span class="item span4">
                <a href="<?php echo urldecode($this->createUrl('gallery/album', array('id'=>'{id}','title'=>'{title}'))); ?>" class="thumbnail">
                    <img src="{image}" class="album" alt="{title}" />
                    <p>{title}</p>
                </a>
            </span>
           
            </li>
</script>

<script>
String.prototype.replaceAll = function(a, b){
  return this.replace(new RegExp(a, 'g'),b);
}

function truncate(obj){
    a = [];
    for(o in obj){
        a.push(obj[o].album);
    }
    return a;
}

var ALBUMS = truncate(<?php echo CJSON::encode($albums) ?>);

$(function(){
    $("#albums").picasaAlbums('<?php echo Yii::app()->params['picasa.user.id'];?>', function(albums){
        console.log(albums);
        
        tmpl = $('#albumTemplate').html();
        
        $(albums).each(function(i, album){
           if(ALBUMS.indexOf(album.id) < 0) return; 
           a = tmpl.replaceAll('{image}',album.thumb).replaceAll('{title}',album.title).replaceAll('{id}', album.id);
           $('#gallery-list').append(a); 
        });
    });
    
});
</script>
<div id="gallery" class="list-view">
    <ul id="gallery-list" class="thumbnails">
    </ul>
</div>
